<script setup lang="ts">
import { onUnmounted, ref } from "vue";

// 日期
const time = ref();
const date = ref();
const week = [
  "星期日",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
];
const timerID = setInterval(updateTime, 1000);
updateTime();

function updateTime() {
  const cd = new Date();
  time.value =
    zeroPadding(cd.getHours(), 2) +
    ":" +
    zeroPadding(cd.getMinutes(), 2) +
    ":" +
    zeroPadding(cd.getSeconds(), 2);
  date.value =
    zeroPadding(cd.getFullYear(), 4) +
    "-" +
    zeroPadding(cd.getMonth() + 1, 2) +
    "-" +
    zeroPadding(cd.getDate(), 2) +
    " " +
    week[cd.getDay()];
}

function zeroPadding(num: number, digit: number) {
  var zero = "";
  for (var i = 0; i < digit; i++) {
    zero += "0";
  }
  return (zero + num).slice(-digit);
}

// 销毁
onUnmounted(() => {
  clearInterval(timerID);
});
</script>

<template>
  <div id="clock">
    <p class="date">{{ date }}</p>
    <p class="time">{{ time }}</p>
  </div>
</template>

<style scoped lang="scss">
#clock {
  font-family: "Share Tech Mono", monospace;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  // 夜间模式
  //color: #daf6ff;
  //text-shadow: 0 0 20px rgba(10, 175, 230, 1),  0 0 20px rgba(10, 175, 230, 0);
  color: grey;
  text-shadow:
    0 0 20px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 0, 0, 0);

  .time {
    letter-spacing: 0.05em;
    font-size: 40px;
    padding: 5px 0;
  }

  .date {
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    font-size: 15px;
  }
}
</style>
